<template>
  <div class="container" :class="theme">
    <slot></slot>
    <div class="component-wrap">
      <div class="datav-box">
        <h4>质量检查统计</h4>
        <div class="datav-con statistics">
          <div>
            <div>{{ qualityData[0] }}</div>
            <span>今日新增</span>
          </div>
          <div>
            <div>{{ qualityData[1] }}</div>
            <span>总安全问题</span>
          </div>
          <div>
            <div>{{ qualityData[2] }}</div>
            <span>整改完成</span>
          </div>
        </div>
      </div>
      <div class="line"></div>
      <div class="datav-box">
        <h4>质量检查趋势</h4>
        <div class="datav-con">
          <Echart
            id="quality-inspection"
            :options="inspectionOption"
            height="230px"
          ></Echart>
        </div>
      </div>
      <div class="line"></div>
      <div class="datav-box">
        <h4>预警分析</h4>
        <div class="datav-con">
          <Echart
            id="warning-analyse"
            :options="analyseOption"
            height="230px"
          ></Echart>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Echart from "@/components/echart";
import moment from "moment";
import {mapGetters} from "vuex";

export default{
  components: {
    Echart
  },
  props:{
    theme:{
      type:String,
      default:''
    }
  },
  data () {
    return {
      qualityData: [0,0,0],
      inspectionAxis: [],
      inspectionSeries: [],
      analyseAxis: [],
      analyseSeries: []
    }
  },
  mounted() {
    this.$api.qualitySafetyTotal({
      projectid: this.projects,
      type: 1
    }).then(res=>{
      const {today,allProblem,allChange} = res.data;
      this.qualityData = [today,allProblem,allChange]
    })
    this.$api.qualitySafetyTrend({
      projectid: this.projects,
      type:1
    }).then(res=>{
      res.data.dates.reverse()
      res.data.integers.reverse()
      this.inspectionAxis = res.data.dates.map(item=>{
        return moment(item).format('MM-DD')
      })
      this.inspectionSeries[0] = res.data.integers
    })
    this.$api.qualitySafetyAnalyze({
      projectid: this.projects,
      type:1
    }).then(res=>{
      this.analyseAxis = res.data.proName
      this.analyseSeries[0] = res.data.integers
    })
  },
  computed: {
    ...mapGetters(["projects"]),
    inspectionOption() {
      return this.getOptions(this.inspectionAxis,this.inspectionSeries,'#FAB217')
    },
    analyseOption() {
      return this.getOptions(this.analyseAxis,this.analyseSeries,'#4862E0')
    }
  },
  methods: {
    getOptions(axis,series,color) {
      return {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          top: 10,
          bottom: 30,
          right:10,
        },
        xAxis: {
          type: 'category',
          axisTick: {
            show: false
          },
          axisLine: {
            show: true
          },
          axisLabel : {//坐标轴刻度标签的相关设置。
                formatter : function(params){
                   var newParamsName = "";// 最终拼接成的字符串
                            var paramsNameNumber = params.length;// 实际标签的个数
                            var provideNumber = 6;// 每行能显示的字的个数
                            var rowNumber = Math.ceil(paramsNameNumber / provideNumber);// 换行的话，需要显示几行，向上取整
                            /**
                             * 判断标签的个数是否大于规定的个数， 如果大于，则进行换行处理 如果不大于，即等于或小于，就返回原标签
                             */
                            // 条件等同于rowNumber>1
                            if (paramsNameNumber > provideNumber) {
                                /** 循环每一行,p表示行 */
                                for (var p = 0; p < rowNumber; p++) {
                                    var tempStr = "";// 表示每一次截取的字符串
                                    var start = p * provideNumber;// 开始截取的位置
                                    var end = start + provideNumber;// 结束截取的位置
                                    // 此处特殊处理最后一行的索引值
                                    if (p == rowNumber - 1) {
                                        // 最后一次不换行
                                        tempStr = params.substring(start, paramsNameNumber);
                                    } else {
                                        // 每一次拼接字符串并换行
                                        tempStr = params.substring(start, end) + "\n";
                                    }
                                    newParamsName += tempStr;// 最终拼成的字符串
                                }

                            } else {
                                // 将旧标签的值赋给新标签
                                newParamsName = params;
                            }
                            //将最终的字符串返回
                            return newParamsName
                },
                color:this.theme === 'light' ? 'rgba(0,0,0,0.8)' : 'rgba(255,255,255,0.8)'

            },
          data: axis
        },
        yAxis: {
          type: 'value',
          splitLine: {
            show: false
          },
          axisLabel:{
            color:this.theme === 'light' ? 'rgba(0,0,0,0.8)' : 'rgba(255,255,255,0.8)'
          }
        },
        series: series.map(item=>{
          return {
            data: item,
            type: 'bar',
            barMaxWidth: 20,
            itemStyle: {
              color: color
            }
          }
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.container{
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 500px;
}
.statistics {
  display: flex;
  justify-content: space-around;
  padding-bottom: 20px;

  > div {
    display: flex;
    flex-direction: column;

    div {
      width: 80px;
      height: 80px;
      display: grid;
      place-items: center;
      border-radius: 50%;
      background: #172257;
      color: #FFFFFF;
      text-align: center;
      font-size: 28px;
      font-family: Source Han Sans CN-Medium, Source Han Sans CN;
      font-weight: 500;
      color: rgba(255,255,255,0.8500);
      line-height: 20px;
      border: 1px solid rgba(111,129,214,0.8500);
    }
    span {
      font-size: 14px;
      font-family: Source Han Sans CN-Normal, Source Han Sans CN;
      font-weight: 400;
      color: rgba(255,255,255,0.8500);
      text-align: center;
      margin-top: 20px;
    }
  }
}

//浅色
.light{
  .statistics {
    > div {
      &:nth-child(1){
        div{
          background: #FFF1E6;
          border: 1px solid #FF801E;
          color: #FF801E;
        }
      }
      &:nth-child(2){
        div{
          background: #EFF6FF;
          border: 1px solid #1890FF;
          color: #1890FF;
        }
      }
      &:nth-child(3){
        div{
          background: #EFFFE6;
          border: 1px solid #43B20C;
          color: #43B20C;
        }
      }
      span {
        color: rgba(73, 73, 73, 1);
      }
    }
  }
}
</style>